<template>
  <BasicLayout>
    <template #wrapper>
      <el-card v-loading="loading" class="box-card">
        <el-descriptions>
          <div v-show="info.order_number" slot="title">单号：{{ info.order_number }}</div>
          <el-descriptions-item label="购买人">{{ info.customer ? info.customer.name : '' }}</el-descriptions-item>
          <el-descriptions-item label="订单状态">
            <el-tag :type="tagType(info.status)" size="small">{{ tagStatus(info.status) }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="订单金额">
            <span class="text-price">{{ $Prices(info.price) }}</span>
          </el-descriptions-item>
          <template v-if="$route.params.type === 'online'">
            <!-- <el-descriptions-item label="课程科目">{{ info.subject }}</el-descriptions-item>
            <el-descriptions-item label="购买课程">{{ info.subject }}</el-descriptions-item>-->
            <el-descriptions-item label="创建时间">{{ info.createdAt && parseTime(info.createdAt) }}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{ info.customer ? info.customer.phone : '' }}</el-descriptions-item>
            <!-- <el-descriptions-item label="归属大区">{{ info.province }}</el-descriptions-item>
            <el-descriptions-item label="所属区域">苏州市</el-descriptions-item>-->
            <el-descriptions-item
              label="关联上级"
            >{{ !info.customer ? '' : info.customer.recommenders ? info.customer.recommenders.name : '' }}</el-descriptions-item>
            <el-descriptions-item label="上级返佣">
              <span class="text-price">{{ $Prices(info.commission) }}</span>
            </el-descriptions-item>
          </template>
          <template v-else-if="$route.params.type === 'material'">
            <!-- <el-descriptions-item label="课程科目">{{ info.subject }}</el-descriptions-item> -->
            <el-descriptions-item label="联系电话">{{ info.customer ? info.customer.phone : '' }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ info.createdAt && parseTime(info.createdAt) }}</el-descriptions-item>
            <el-descriptions-item label="付款时间">{{ info.pay_at && parseTime(info.pay_at) }}</el-descriptions-item>
            <el-descriptions-item label="收货地址">{{ info.address }}</el-descriptions-item>
            <el-descriptions-item
              label="关联上级"
            >{{ !info.customer ? '' : info.customer.recommenders ? info.customer.recommenders.name : '' }}</el-descriptions-item>
            <el-descriptions-item label="订单返佣">
              <span class="text-price">{{ $Prices(info.commission) }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="邮费">
              <span class="text-price">{{ info.postage ? $Prices(info.postage) : '免邮' }}</span>
            </el-descriptions-item>
          </template>
          <template v-else>
            <!-- <el-descriptions-item label="课程科目">{{ info.subject }}</el-descriptions-item>
            <el-descriptions-item label="购买课程">{{ info.subject }}</el-descriptions-item>-->
            <el-descriptions-item label="创建时间">{{ info.createdAt && parseTime(info.createdAt) }}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{ info.customer ? info.customer.phone : '' }}</el-descriptions-item>
            <el-descriptions-item
              label="归属大区"
            >{{ !info.department ? '': info.department.Department ? info.department.Department.deptName : '' }}</el-descriptions-item>
            <el-descriptions-item
              label="所属区域"
            >{{ !info.department ? '' : info.department.Province ? info.department.Province.name : '' }}</el-descriptions-item>
            <el-descriptions-item label="归属教学点">{{ info.department ? info.department.name : '' }}</el-descriptions-item>
            <el-descriptions-item
              label="关联上级"
            >{{ !info.customer ? '' : info.customer.recommenders ? info.customer.recommenders.name : '' }}</el-descriptions-item>
            <el-descriptions-item label="上级返佣">
              <span class="text-price">{{ $Prices(info.commission) }}</span>
            </el-descriptions-item>
          </template>
        </el-descriptions>
      </el-card>

      <template v-if="$route.params.type === 'material'">
        <el-card class="box-card" header="购买资料">
          <el-table :data="info.Material" border>
            <el-table-column prop="name" align="center" label="资料名称" />
            <el-table-column prop="type" align="center" label="类型" />
            <el-table-column prop="category" align="center" label="资料分类" />
            <el-table-column prop="price" align="center" label="价格">
              <template slot-scope="scope">
                <span class="text-price">{{ $Prices(scope.row.price) }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>

        <!-- <el-card class="box-card" header="发货信息">
          <el-form :model="form" label-width="80px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  prop="express_number"
                  label="物流单号"
                  :rules="[{ required: true, message: '请填写物流单号', trigger: 'blur' }]"
                >
                  <el-input
                    v-model="form.express_number"
                    placeholder="请填写物流单号"
                    size="small"
                    :readonly="info.express_number"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  prop="express_company"
                  label="承运公司"
                  :rules="[{ required: true, message: '请选择快递承运公司', trigger: 'blur' }]"
                >
                  <el-select
                    v-model="form.express_company"
                    placeholder="请选择承运公司"
                    size="small"
                    :disabled="info.express_number"
                  >
                    <el-option
                      v-for="item in logisticsList"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="18">
                <el-form-item prop="comments" label="备注">
                  <el-input
                    v-model="form.comments"
                    placeholder="请输入"
                    type="textarea"
                    :rows="6"
                    :disabled="info.express_number"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-show="!info.express_number" :gutter="20">
              <el-col :span="18">
                <el-form-item>
                  <div class="flex-center">
                    <el-button type="primary" @click="handlePost">确 认</el-button>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>-->
      </template>

      <el-card v-if="$route.params.type === 'offline'" class="box-card" header="订单进度">
        <el-steps :active="activeIndex">
          <el-step title="提交订单">
            <div slot="description">
              <div>{{ records[0] ? records[0].creator : '' }}</div>
              <div>{{ records[0] && parseTime(records[0].operate_time) }}</div>
            </div>
          </el-step>
          <el-step title="财务复审">
            <div slot="description">
              <div>{{ records[1] ? records[1].creator : '' }}</div>
              <div>{{ records[1] && parseTime(records[1].operate_time) }}</div>
            </div>
          </el-step>
          <el-step title="完成">
            <div slot="description">
              <div>{{ records[1] && parseTime(records[1].operate_time) }}</div>
            </div>
          </el-step>
        </el-steps>
      </el-card>

      <el-card
        v-if="$route.params.type !== 'material' && info.Course"
        class="box-card"
        header="购买课程"
      >
        <el-table :data="info.Course" border>
          <el-table-column prop="name" align="center" label="课程名称" />
          <el-table-column prop="province" align="center" label="适用大区" />
          <el-table-column prop="subject" align="center" label="科目" />
          <el-table-column prop="price" align="center" label="价格">
            <template slot-scope="scope">
              <span class="text-price">{{ $Prices(scope.row.price) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-card class="box-card" header="用户近半年购买记录">
        <el-table :data="info.history_lists" border>
          <el-table-column type="index" header-align="center" width="50" label="序号" align="center" />
          <el-table-column
            prop="order_number"
            align="center"
            label="订单编号"
            :show-overflow-tooltip="true"
          />
          <el-table-column prop="price" align="center" label="订单金额">
            <template slot-scope="scope">
              <span class="text-price">{{ $Prices(scope.row.price) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createdAt" align="center" label="提交时间">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createdAt) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="commission" align="center" label="订单返佣">
            <template slot-scope="scope">
              <span class="text-price">{{ $Prices(scope.row.commission) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="customer" align="center" label="关联上级">
            <template
              slot-scope="scope"
            >{{ scope.row.customer && scope.row.customer.recommenders && scope.row.customer.recommenders.name }}</template>
          </el-table-column>
        </el-table>
      </el-card>
    </template>
  </BasicLayout>
</template>

<script>
import {
  courierCompany,
  offlineOrder,
  onlineOrder,
  materialOrder,
  deliverGoods,
  comboOrder
} from '@/api/admin/sys-order'
import { getStatus, getTagType } from '../utils'
export default {
  name: 'SysOrderdetail',
  components: {},
  data() {
    return {
      activeIndex: 0,
      logisticsList: [],
      form: {},
      loading: true,
      info: {},
      records: []
    }
  },
  created() {
    this.fetchCourierCompany()
    this.fetchData()
  },
  methods: {
    handlePost() {
      // 发货
      deliverGoods({
        ...this.form,
        id: this.info.id
      }).then(response => {
        if (response.code !== 200) {
          this.msgError(response.msg)
          return
        }
        this.visible = false
        this.form = {}
        this.fetchData()
        this.msgSuccess(response.msg)
      })
    },
    tagType(status) {
      return getTagType(this.$route.params.type, status)
    },
    tagStatus(status) {
      console.log(this.$route.params.type, 'this.$route.params.type............')
      console.log(status, 'status............')

      return getStatus(this.$route.params.type, status)
    },
    // 获取快递公司
    fetchCourierCompany() {
      courierCompany().then(res => {
        if (res.code === 200) {
          this.logisticsList = res.data ?? []
        }
      })
    },
    fetchData() {
      this.loading = true
      let func = onlineOrder
      switch (this.$route.params.type) {
        case 'offline':
          func = offlineOrder
          break
        case 'material':
          func = materialOrder
          break
        case 'combo':
          func = comboOrder
          break
        default:
          break
      }

      func({ id: this.$route.params.id })
        .then(res => {
          if (res.code !== 200) {
            this.$message.error(res.msg)
            return
          }
          this.info = res.data?.detail ?? {}
          if (res.data?.records) {
            this.records = res.data?.records
            this.activeIndex =
              this.records.length === 2 ? 3 : this.records.length
          }
          this.info.history_lists = res.data.history_lists
          if (res.data.detail?.express_number) {
            this.form = {
              express_number: res.data?.detail.express_number,
              express_company: res.data?.detail.express_company,
              comments: res.data?.detail.comments
            }
          }
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style scoped>
.flex-center {
  display: flex;
  align-items: center;
  justify-content: end;
}
</style>
